<template>
  <div>
    <el-button @click="addMusic()">新增歌曲</el-button>



    <el-dialog
      title="添加歌曲"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">


      <el-row :gutter="20">
        <el-col :span="6" align="center">
          <div class="grid-content bg-purple ">
            <el-tag type="success" style="width: 110px">请输入歌曲名称</el-tag>
          </div>
        </el-col>
        <el-col :span="18" align="center">
          <div class="grid-content bg-purple">
            <el-input v-model="mus.musicName" placeholder="请输入内容" style="width: 220px">
            </el-input>
          </div>
        </el-col>
      </el-row>
      <br/>
      <el-row :gutter="20">
        <el-col :span="6" align="center">
          <div class="grid-content bg-purple ">
            <el-tag type="success" style="width: 110px">请选择地区</el-tag>
          </div>
        </el-col>
        <el-col :span="18" align="center">
          <div class="grid-content bg-purple">

            <el-select v-model="regin.add" placeholder="请选择地区">
              <el-option
                v-for="(item,index) in regin" :key="index"
                :label="item" :value="item">
              </el-option>
            </el-select>


          </div>
        </el-col>
      </el-row>
      <br/>
      <el-row :gutter="20">
        <el-col :span="6" align="center">
          <div class="grid-content bg-purple ">
            <el-tag type="success" style="width: 110px">请选择歌曲类型</el-tag>
          </div>
        </el-col>
        <el-col :span="18" align="center">
          <div class="grid-content bg-purple">
            <el-select v-model="mt" placeholder="请选择歌曲类型">
              <el-option
                v-for="item in musicType"
                :key="item.musicId"
                :label="item.musicName"
                :value="item.musicId"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <br/>
      <el-row :gutter="20">
        <el-col :span="6" align="center">
          <div class="grid-content bg-purple ">
            <el-tag type="success" style="width: 110px">请选择歌手姓名</el-tag>
          </div>
        </el-col>
        <el-col :span="18" align="center">
          <div class="grid-content bg-purple">

            <el-select v-model="s" placeholder="请选择歌手姓名">
              <el-option
                v-for="item in singers"
                :key="item.singerId"
                :label="item.singerName"
                :value="item"

                :disabled="item.disabled">
              </el-option>
            </el-select>

          </div>
        </el-col>
      </el-row>


      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="send()">确 定</el-button>
  </span>
    </el-dialog>


    <el-table
      :data="tableData"

      border
      style="width: 100%">
      <el-table-column
        prop="musicId"
        label="歌曲编号"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="musicName"
        label="歌曲名称"
        align="center"
        width="180">
      </el-table-column>


      <el-table-column
        prop="musicImage"
        label="头像"
        align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 80px; height: 80px"
            :src="scope.row.musicImage"
          ></el-image>
        </template>
      </el-table-column>

      <el-table-column
        prop="singer.singerAddress"
        align="center"
        label="地区">
      </el-table-column>
      <el-table-column
        prop="musicType.musicName"
        align="center"
        label="歌曲类型">
      </el-table-column>
      <el-table-column
        prop="singer.singerName"
        align="center"
        label="歌手">
      </el-table-column>

      <el-table-column
        prop="visitQuantity"
        align="center"
        sortable
        label="访问量">
      </el-table-column>

      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>


    </el-table>


    <el-pagination
      :page-size=pageSize
      :pager-count="7"
      :current-page.sync=pageNum
      layout="prev, pager, next"
      :total=sum
      @current-change="aa"
      align="center"
    >
    </el-pagination>
  </div>
</template>
<!--music_id		music_image	music_type_id	album_id	singer_id	visit_quantity	download_quantity	collect_quantity	publish_time	lyric	music_description	state	music_url	language_id	lastupdatetime-->

<!--        musicId: 1, musicName: "经典"-->
<!--singerId: 1, singerName: "刘德华", singerAddress: "香港", singerGender: "男", singerDescription: "帅气的"-->
<script>
  import axios from 'axios'

  export default {

    data() {
      return {
        tableData: [{
          musicImage: '',
          visitQuantity: ''
        }],
        singers: [{
          singerId: '',
          singerName: '',
          singerAddress: '',
          singerGender: '',
          singerDescription: ''
        }],
        s: '',
        mt: '',
        mus: [],
        regin: [{
          add: '',
        }],
        pageSize: 4,
        pageNum: '',
        sum: '',
        musicType: [{
          musicId: '',
          musicName: ''
        }],
        musicTypetar: '',
        dialogVisible: false
      }
    },

    methods: {
      handleDelete(index, row) {
        this.$confirm('此操作将删除该歌曲, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '删除中...';
              this.handleDeleteDo(index, row); // 确认后的执行函数
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 300);
            } else {
              done();
            }
          }
        }).then(() => {
          this.$message.success('删除成功');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      open1() {
        this.$notify({
          title: '提示',
          message: '增加歌曲前请先维护新增歌曲的歌手姓名，歌曲类型，地区等信息',
          type: 'warning'
        });
      },
      open3() {
        this.$message({
          message: '歌曲删除成功',
          type: 'warning'
        });
      },
      handleEdit(index, row) {
        console.log(index + "========index========")
        console.log(row.singer.singerName + "========row========")
      },
      handleDeleteDo(index, row) {
        console.log(index + "========index========")
        console.log(row.musicId + "========row========")
        var _this = this;
        axios.get("http://localhost:8100/deleteMusic?id=" + row.musicId).then(res => {
          console.log(res.data.message);
          if (res.data.state) {
            window.location.reload();
          }
        })
      },
      send() {
        this.dialogVisible = false;
        var _this = this;
        console.log(_this.s.singerId + "========s============")
        console.log(_this.s.singerName + "========s============")
        console.log(_this.mt + "========mt============")
        axios.post("http://localhost:8100/saveMusic", {
          "musicName": _this.mus.musicName,
          "musicType": _this.musicType.musicName,
          "singerName": _this.singers.singerName,
          "singerAddress": _this.regin.add,
          "musicId": _this.s.singerId,
          "musicNameId": _this.mt
        }).then(res => {
        })
      },
      addMusic() {
        this.dialogVisible = true;
        this.open1();
      },

// 获取歌曲类型：
      getMusicType() {
        var _this = this;
        axios.post("http://localhost:8100/musicType/findAll").then(res => {
          console.log(res.data.list);
          _this.musicType = res.data.list;
        })
      },
      // 获取歌手列表
      getSingers() {
        var _this = this;
        axios.post("http://localhost:8100/singer/getSingerList").then(res => {
          console.log(res.data.list);
          _this.singers = res.data.list;
          console.log(_this.singers[0])
        })
      },
      // 获取地区
      getRe() {
        var _this = this;
        axios.get("http://localhost:8100/singer/getSingerAdress").then(res => {
          // alert(res.data.list)
          console.log(res.data.list);
          _this.regin = res.data.list;

        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      aa() {
        var _this = this
        console.log(this.pageNum)
        console.log(this.sum)
        axios.get("http://localhost:8100/getAllMusic?pageSize=" + _this.pageSize + "&pageNum=" + _this.pageNum).then(function (res) {
          console.log(res.data.list)
          _this.tableData = res.data.list;
          _this.sum = res.data.total;
        })
      },
      getMusic() {
        var _this = this;
        axios.get("http://localhost:8100/getAllMusic?pageSize=" + 4 + "&pageNum=" + 1).then(function (res) {
          _this.tableData = res.data.list;
          _this.sum = res.data.total;
          console.log(res.data.list)
        })
      }
    },
    mounted() {
      this.sum = 10
      this.getMusic();
      this.getMusicType();
      this.getSingers();
      this.getRe();
      this.total = 10


    }
  }
</script>

<style scoped>

</style>
